<template>
  <gui-page ref="pageRef" class="gui-bg-white" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">一分一段</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding">
        <!-- 主体区域 -->
        <view class="gui-margin-top">
          <view class="gui-bold">
            <text class="gui-h6">2023年重庆物理一分一段表</text>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">
            <view class="gui-flex gui-rows gui-nowrap gui-border-l gui-border-t gui-bg-orange3 gui-color-white gui-dark-bg-level-2">
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">分数</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">人数</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">位次</text>
            </view>
            <view
              v-for="(item, index) in students"
              :key="index"
              class="gui-flex gui-rows gui-nowrap gui-border-l"
              :class="{ 'gui-bg-orange5': index % 2 === 1 }"
              @tap.stop="handleClick(item)"
            >
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[0] }}</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[1] }}</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[2] }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
const students = ref<Array<any>>([
  ['700以上', '3', '3', 7],
  ['666-700', '100', '103', 6],
  ['650', '1123', '1234', 6],
  ['700以上', '3', '3', 7],
  ['666-700', '100', '103', 6],
  ['650', '1123', '1234', 6],
])

const handleClick = (e: any) => {
  console.log(e)
  uni.navigateTo({
    url: `../school/index?data=${JSON.stringify(e)}`,
  })
}
onLoad((option) => {
  // console.log(JSON.parse(option.data))
})
</script>
<style scoped>
.gui-td {
  width: 100rpx;
  flex: 1;
  overflow: hidden;
  padding: 20rpx 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}
</style>
